"use client"
import { useContext, useState } from "react";
import { debounce } from "../Z";
import { HoverPositionType } from "./reactDnd";
import { NodeMapContext } from "@/providers/NodeMapContext";
import { RootState, useAppDispatch } from "@/store/client";
import { addlastHoverData } from "@/store/client/modules/reactdndStore";
import { useSelector } from "react-redux";
interface useNodeMapProps {
    refDrage?: any
    monitor?: any
}

export const useHoverPositionView = () => {
    const dispatch = useAppDispatch()
    const lastHoverDataStore = useSelector((state: RootState) => state.reactDnd.lastHoverData);
    const nowDataStore = useSelector((state: RootState) => state.reactDnd.nowData);
    
    const isNow = (data: any) => {
        const Now = nowDataStore?.id === data.id
        return Now;
    }
    const isTop = (data: any) => {
        const Top = lastHoverDataStore?.id === data.id && lastHoverDataStore?.position === HoverPositionType.TOP
        return Top;
    }
    const isBottom = (data: any) => {
        const Bottom = lastHoverDataStore?.id === data.id && lastHoverDataStore?.position === HoverPositionType.BOTTOM
        return Bottom;
    }
      const isMiddle = (data: any) => {
        const Bottom = lastHoverDataStore?.id === data.id && lastHoverDataStore?.position === HoverPositionType.MIDDLE
        return Bottom;
    }
    // 防抖传入最后一个参数
    const debouncedHover = debounce((data: any, position: string) => {
        const positionData = {
            ...data,
            position
        }
        dispatch(addlastHoverData(positionData))
    }, 50); // 300ms 防抖
    // 销毁函数
    const debouncedHoverEnd = debounce(() => {
        dispatch(addlastHoverData({}))
    }, 51); // 300ms 防抖
    const useHoverPosition = (refDrop:any, monitor:any, item:any, data:any) => {
        if (!refDrop.current) return;

        // 1. 获取目标元素的尺寸和位置
        const hoverBoundingRect = refDrop.current.getBoundingClientRect();
        const hoverHeight = hoverBoundingRect.bottom - hoverBoundingRect.top;

        // 2. 获取鼠标当前位置
        const clientOffset = monitor.getClientOffset();
        if (!clientOffset) return;
        // 3. 计算鼠标相对于目标顶部的距离
        const hoverClientY = clientOffset.y - hoverBoundingRect.top;

        // 4. 判断是否进入上/下 1/10 区域
        // const isTop10Percent = hoverClientY < hoverHeight * 0.1;
        // const isBottom10Percent = hoverClientY > hoverHeight * 0.9;
        const isTop10Percent = hoverClientY < hoverHeight * 0.1;
        const isBottom10Percent = hoverClientY > hoverHeight * 0.9;
        // 获取拖拽方向（向上 or 向下）
        const dragOffset = monitor.getDifferenceFromInitialOffset();
        const isDraggingDown = dragOffset?.y && dragOffset.y > 0;

        if (isTop10Percent) {
            // 如果向下拖拽，且靠近上半部分，则认为是插入到当前目标前面
            // if (isDraggingDown) {
            debouncedHover(data, HoverPositionType.TOP)
            console.log('✅ 位于上方 10% 区域',  HoverPositionType.TOP);

            return HoverPositionType.TOP
            // }
            // 触发上方逻辑（如高亮或插入提示）
        } else if (isBottom10Percent) {
            console.log('✅ 位于下方 10% 区域');
            // 触发下方逻辑
            // 如果向上拖拽，且靠近下半部分，则认为是插入到当前目标后面
            // if (!isDraggingDown) {
            debouncedHover(data, HoverPositionType.BOTTOM)
            return HoverPositionType.BOTTOM
            // }
        } else {
            console.log('✅ 位于中间 10% 区域', monitor);
            debouncedHover(data, HoverPositionType.MIDDLE)

            return HoverPositionType.MIDDLE

        }
    }

    const useHoverPositionComponent = (refDrop:any, monitor:any, item:any, data:any) => {
        if (!refDrop.current) return;

        // 1. 获取目标元素的尺寸和位置
        const hoverBoundingRect = refDrop.current.getBoundingClientRect();
        const hoverHeight = hoverBoundingRect.bottom - hoverBoundingRect.top;

        // 2. 获取鼠标当前位置
        const clientOffset = monitor.getClientOffset();
        if (!clientOffset) return;
        // 3. 计算鼠标相对于目标顶部的距离
        const hoverClientY = clientOffset.y - hoverBoundingRect.top;

        // 4. 判断是否进入上/下 1/10 区域
        // const isTop10Percent = hoverClientY < hoverHeight * 0.1;
        // const isBottom10Percent = hoverClientY > hoverHeight * 0.9;
        const isTop10Percent = hoverClientY < hoverHeight * 0.5;
        const isBottom10Percent = hoverClientY > hoverHeight * 0.5;



        // 获取拖拽方向（向上 or 向下）
        const dragOffset = monitor.getDifferenceFromInitialOffset();
        const isDraggingDown = dragOffset?.y && dragOffset.y > 0;
        if (isTop10Percent) {
            debouncedHover(data, HoverPositionType.TOP)
            // 如果向下拖拽，且靠近上半部分，则认为是插入到当前目标前面
            // if (isDraggingDown) {
            // data.Position = HoverPositionType.TOP
            // setHoverPosition(HoverPositionType.TOP)
            // console.log('✅ 位于上方 10% 区域',  HoverPositionType.TOP);

            // return HoverPositionType.TOP
            // 触发上方逻辑（如高亮或插入提示）
            // }
        } else if (isBottom10Percent) {
            debouncedHover(data, HoverPositionType.BOTTOM)
            console.log('✅ 位于下方 10% 区域');
            // 触发下方逻辑
            // 如果向上拖拽，且靠近下半部分，则认为是插入到当前目标后面
            // if (!isDraggingDown) {
            // setHoverPosition(HoverPositionType.BOTTOM)
            // data.Position = HoverPositionType.BOTTOM
            // return HoverPositionType.BOTTOM
            // }
        }

    }

    return {

        useHoverPosition,
        useHoverPositionComponent,
        debouncedHoverEnd,
        isTop,
        isMiddle,
        isBottom,
        isNow
    };
};

